body{
    margin: 0;
    padding: 0;
    
}
a, ul, ol, li{
    text-decoration: none;
    color: #000;
    list-style: none;
}
.navi{
    /* background: linear-gradient(30deg, aquamarine, rgb(4, 136, 141),rgb(31, 110, 184)) ; */
    background-color: blueviolet;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    /* position: fixed; */
}
.left, .right{
    text-align: center;
    line-height: 50px;
    display: flex;
}


.item{
    margin: 0 20px 0 20px;  
    cursor: pointer;  
    user-select: none;
}
.item>*{
    vertical-align: middle;
}
.item>img{
    height: 40px;
}

.mail-list{
    display: flex;
    padding: 0;
    margin: 10px 0 0 0;
    max-height: 1250px;
    overflow-y: scroll;
    flex-direction: column;
}

.me, .friend{
    text-align: center;
    width: 98%;
    height: 400px;
    /* background-color: rgb(93, 92, 145); */
    /* border: 5px #e3e3e3 solid; */
    background-color: #eee;
    margin: 5px 0 0 0;
    border: #e3e3e3 solid 0.5px;
    border-radius: 10px;
}

.me{
    height: 500px;
}
.friend{
    display: flex;

}
.friend>.info{
    flex-direction: column;
    justify-content: space-around;
}

.info{
    width: 100%;
    display: flex;
    font-size: 32px;
    justify-content: space-between;
}
.info>img{
    margin-left: 5px;
    border-radius: 10px;
}
.text {
    width: 100%;
    text-align: left;
}

.text>li{
    margin: 10px;
}
li>span:first-child{
    display: inline-block;
    width: 200px;
    font-weight: 900;
}
li>span:nth-child(2){
    display: inline-block;
    width: calc(100% - 300px);
    text-align: center;
    color: #222;
    font-family: Arial, Helvetica, sans-serif;
}
.options{
    display: flex;
    justify-content: space-around;
}
.options>*{
    display: inline-block;
    width: 20%;
    text-align: center;
    /* border: 1px solid #888; */
    border-radius: 10px;
    background-color: skyblue;
    color: #e3e3e3;
    box-shadow: 2px 2px 5px rgba(103, 186, 253, 0.856);
    cursor: pointer;
    transition: 0.1s ease-in;
    user-select: none;
}
.options>*:hover{
    transform: translateY(-5px);
}